* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
  color: rgb(255 255 255 / 87%);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --vp-c-bg: #fff;
  --vp-c-text-1: #fff;
  --vp-active-text: #fff;
  --vp-text-select-color: #242424;
  --vp-menu-hover-color: #f6f6f6;
  --vp-menu-active-color: #242424;
  --vp-input-switch-bg-color: #c2c2c4;
  --vp-input-border-color: #c2c2c4;
  --vp-shadow-1: 0 1px 2px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 6%);
}

.dark {
  color-scheme: dark;
  --vp-c-bg: #000;
  --vp-c-text-1: #3c3c43;
  --vp-text-select-color: rgb(255 255 255 / 94%);
  --vp-menu-hover-color: rgb(255 255 255 / 4%);
  --vp-menu-active-color: rgb(255 255 255 / 4%);
  --vp-input-switch-bg-color: #c2c2c4;
  --vp-input-border-color: #c2c2c4;

  .text-color {
    color: var(--vp-c-text-1);
  }

  body {
    color: #fff;
  }
}

// .text-active {
//   color: var(--vp-active-text);
// }
// .bg-active {
//   color: var(--vp-c-bg);
// }

.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title,
.ant-menu-light > .ant-menu .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: var(--vp-text-select-color);
}

.switch-theme {
  position: relative;
  border-radius: 11px;
  display: block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--vp-input-border-color);
  background-color: var(--vp-input-switch-bg-color);
  transition: border-color 0.25s !important;
  cursor: pointer;
  outline: none;
}

.ant-menu-title-content {
  height: 100%;
}

.ant-menu-submenu.ant-menu-submenu-popup .ant-pro-base-menu-vertical-item-title {
  align-items: center;
}

.check {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--vp-c-bg);
  box-shadow: var(--vp-shadow-1);
  transition: transform 0.25s !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
.dark::view-transition-old(root) {
  z-index: 1;
}

.dark::view-transition-new(root) {
  z-index: 999;
}

::view-transition-old(root) {
  z-index: 999;
}

::view-transition-new(root) {
  z-index: 1;
}

.ant-pro-layout .ant-pro-layout-content {
  padding: 0 !important;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #fff;
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}
